<template>
  <el-config-provider :locale="elLocale">
    <router-view></router-view>
  </el-config-provider>

  <el-backtop :bottom="100">
    <div class="backtop flexcc">
      <img
        src="@/assets/img/backtop.png"
        alt=""
      />
    </div>
  </el-backtop>

  <!-- 对话 -->
  <Dialogue v-if="!$isMobile && routeShow" />

  <!-- 冻结提示 -->
  <Confirm
    v-if="dialogFreeze"
    :visible="dialogFreeze"
    :text="t('freeze')"
    @close="dialogFreeze = false"
    @cancel="dialogFreeze = false"
    @confirm="contactCustomerService"
  />
</template>

<script setup>
import { ref, computed, getCurrentInstance, onBeforeMount, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { getAdQueryAllListApi } from '@/service/common'
import useAd from './stores/ad'
import useLogin from './stores/login'
import useDialogue from '@/stores/dialogue'
import { getCustomerInfoApi } from '@/service/login.js'

import Dialogue from '@/components/Dialogue.vue'
import Confirm from './components/Confirm.vue'

// import zhCn from 'element-plus/lib/locale/lang/zh-cn'
// import en from 'element-plus/lib/locale/lang/en'

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'

const { $isMobile } = getCurrentInstance().appContext.config.globalProperties
if ($isMobile) {
  document.body.style.minWidth = 'auto'
}

const router = useRouter()
const route = useRoute()

onBeforeMount(() => {
  init()
})

const { t, locale } = useI18n()
watch(locale, () => {
  init()
})

// element 语言包
const elLocale = computed(() => {
  const obj = {
    'zh-CN': zhCn,
    en
  }
  return obj[locale.value]
})

// 显示对话框的页面
const routeShow = computed(() => {
  return !route.meta?.hideDialoge
})

// 广告
const storeAd = useAd()
const { setAdList } = storeAd
const getAdList = () => {
  getAdQueryAllListApi().then(({ data }) => {
    setAdList(data)
  })
}

// 冻结提示
const dialogFreeze = ref(false)
const storeLogin = useLogin()
watch([() => storeLogin.userInfo, () => route.query], (n) => {
  if (n[0]) {
    // 冻结状态
    if (n[0].status === '2') {
      dialogFreeze.value = true
    }
  }
})

// 联系客服
const storeDialogue = useDialogue()
const { setDialogVisible, setActivePerson } = storeDialogue
const contactCustomerService = () => {
  setDialogVisible(true)
  setActivePerson({
    customerName: t('dialogue.system'),
    customerId: '0'
  })
  dialogFreeze.value = false
}

// 获取登录用户信息
const getUserInfo = () => {
  if(!storeLogin.token) return
  getCustomerInfoApi().then(({ data }) => {
    storeLogin.setUserInfo(data)
  })
}

const init = () => {
  getAdList()
  getUserInfo()
}
</script>

<style lang="scss" scoped>
.el-backtop {
  width: 50px;
  height: 50px;
}

.backtop {
  width: 50px;
  height: 50px;
  background: #ffffff;
  box-shadow: 0px 0px 28px 2px rgba(55, 61, 75, 0.06);
  border-radius: 4px;
}
.lx-flex-start {
  display: flex;
  align-items: flex-start;
}
.lx-flex-shrink-0 {
  flex-shrink: 0;
}
</style>
